<template>
	<div class="code-layout" v-if="detailData">
		<div class="code-materials" v-if="detailData">
			<div>
				<!--          <plug-state :statusStr="status" v-if="status"/>-->
				<br />
			</div>
		</div>
		<div class="code-info">
			<h3 class="info-title">基本信息</h3>
			<ul class="info-item">
				<li>
					<span class="key">名称:</span>
					<span class="val">{{ detailData.model.name }}</span>
				</li>
				<li>
					<span class="key"> 创建人： </span>
					<span class="val">{{
						detailData.create_user &&
							((detailData.create_user && detailData.create_user.nick_name) ||
								(detailData.create_user && detailData.create_user.username))
					}}</span>
				</li>
				<li>
					<span class="key">创建时间： </span>
					<span class="val">{{ detailData.create_time }}</span>
				</li>
			</ul>
			<h3 class="info-title">环境信息 <i class="el-icon-edit-outline edit" @click="updateModelEva" /></h3>
			<ul class="info-item">
				<li>
					<span class="key">类型:</span>
					<span class="val" v-if="detailData.type">{{ detailData.type.name }}</span>
				</li>
				<li>
					<span class="key">资源组:</span>
					<span class="val">{{ detailData.node_group_list[0].product.name }}</span>
				</li>
				<li>
					<span class="key">评估镜像:</span>
					<span class="val">{{ detailData.node_group_list[0].image.name }}</span>
				</li>
				<li>
					<span class="key">启动命令行:</span>
					<span class="val">{{ detailData.node_group_list[0].command }}</span>
				</li>
				<li>
					<span>数据集:</span>
					<div v-for="item in detailData.dataset_list" :key="item.id">
						<span class="val">{{ item.dataset.name }}</span>
						<span class="val">{{ item.dataset.label }}</span>
						<span class="val">{{ item.dataset.desc }}</span>
					</div>
				</li>
			</ul>
		</div>
		<el-dialog :visible.sync="showModelEvaDialog" title="模型评估" width="840px">
			<el-form
				class="form myself-form"
				ref="evaModelForm"
				:model="evaModelForm"
				:rules="modelEvaSubmitRules"
				label-width="120px"
			>
				<el-form-item label="模型名称" prop="version">
					{{ detailData.model.name }}
				</el-form-item>
				<el-form-item label="模型版本" prop="version">
					{{ detailData.model_version.version }}
				</el-form-item>
				<el-form-item label="类型" prop="version">
					<el-select
						v-model="evaModelForm.type"
						value-key="id"
						@change="modelEvaTypeChange"
						style="width:100%;"
						:popper-append-to-body="false"
						popper-class="select-popper"
						placeholder="请选择"
					>
						<el-option v-for="item in modelEvaTyleOptions" :key="item.id" :label="item.name" :value="item"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="资源组">
					<el-select v-model="node_group_list.product_id" class="full-extent-select">
						<el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="评估镜像">
					<el-select v-model="node_group_list.image_id" class="full-extent-select">
						<el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="启动命令行" prop="command">
					<el-input type="text" v-model="evaModelForm.node_group_list[0].command" />
				</el-form-item>
				<el-form-item label="数据集">
					<plug-dataset :dataset_list="evaModelForm.dataset_list" @infoDataset="infoDataset" />
				</el-form-item>
				<el-form-item label="">
					<el-button type="primary" @click="commitModelEva">确定</el-button>
					<el-button class="none-type" @click="cancelModelEva">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
// import plugState from '@/components/module/plug-state'
import plugDataset from "@/components/module/plug-in-dataset";
import { getAllImages } from "@/api/image";
import { putModelEvaluatio, getModelEvaluatioeDetail } from "@/api/modelEva";
import { getAllProducts } from "@/api/product";
import { getAllModelEvaluationTypes } from "@/api/modelEvaType";

export default {
	data() {
		return {
			modelId: this.$route.query.id,
			status: null,
			evaModelForm: null,
			showUpdateDockfileDialog: false,
			dockerFile: "",
			imageOptions: [],
			showModelEvaDialog: false,
			node_group_list: [],
			productOptions: [],
			modelEvaTyleOptions: [],
			showDiv: false,
			modelEvaSubmitRules: {},
		};
	},

	props: ["detailData"],
	watch: {
		detailData(val) {
			this.status = val.status;
			this.formData = val;
		},
	},
	async created() {
		this.evaModelForm = JSON.parse(JSON.stringify(this.detailData));
		this.getImageList();
		this.getProductList();
		this.getAllModelEvaTypes();
	},
	components: {
		// plugState,
		plugDataset,
	},

	async mounted() {
		this.$nextTick(() => {
			this.status = this.detailData.status;
		});
	},
	destroyed() {},
	methods: {
		async getAllModelEvaTypes() {
			let res = await getAllModelEvaluationTypes();
			let data = res.data;
			data.push({ name: "自定义", id: "1" });
			this.modelEvaTyleOptions = data;
			console.log(" this.modelEvaTyleOptions", this.modelEvaTyleOptions);
		},
		async getProductList() {
			let res = await getAllProducts();
			this.productOptions = res.data;
		},
		async getImageList() {
			let res2 = await getAllImages({ visibility: 2, type: 3 });
			this.imageOptions = res2.data;
		},
		modelEvaTypeChange() {
			if (this.evaModelForm.type.id == "1") {
				this.showDiv = true;
			} else {
				this.showDiv = false;
			}
		},
		async updateModelEva() {
			this.showModelEvaDialog = true;
			this.node_group_list = this.detailData.node_group_list[0];
		},
		commitModelEva() {
			console.log("commit");
			this.$refs.evaModelForm.validate(async (valid) => {
				if (valid) {
					console.log("");
					if (this.evaModelForm.type.id != "1") {
						(this.evaModelForm.type_id = this.evaModelForm.type.id),
							(this.evaModelForm.node_group_list = [
								{
									image_id: this.evaModelForm.type.eva_image_id,
									command: this.evaModelForm.node_group_list[0].command,
									product_id: this.node_group_list.product_id,
									type: 1,
									pod_num: 1,
								},
							]);
					} else {
						this.evaModelForm.type_id = this.evaModelForm.type.id;
						this.evaModelForm.node_group_list = [this.node_group_list];
					}
					await putModelEvaluatio(this.evaModelForm);
					this.showModelEvaDialog = false;
					this.freshData();
				}
			});
		},
		infoDataset(datasets) {
			this.evaModelForm.dataset_list = [];
			datasets.forEach((e) => {
				e.dataset_id = e.id;
				e.dataset = {
					name: e.name,
					alias: e.alias,
					id: e.id,
				};
			});
			this.evaModelForm.dataset_list = datasets;
			console.log("infoDataset", datasets);
		},
		async freshData() {
			let res = await getModelEvaluatioeDetail({ id: this.detailData.id });
			if (res && res.data) {
				let data = res.data;
				if (data.type_id == 1) {
					data.type = { name: "自定义", id: "1" };
				}
				this.$emit("update:detailData", res.data);
			}
		},
		cancelModelEva() {
			this.showModelEvaDialog = false;
		},
	},
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";
</style>
